<template>
  <div>
    <el-container>
      <el-main>
        <div class="dept">
          <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>同步数据</el-breadcrumb-item>
            <el-breadcrumb-item>税率配置</el-breadcrumb-item>
          </el-breadcrumb>
          </div>

          <el-card class="box-card">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>条件区域</el-breadcrumb-item>
                </el-breadcrumb>
             <el-input v-model="searchname" placeholder="请输入名称"></el-input>
             <el-button type="primary" @click="Search" style="margin-left:10px;">查询</el-button>
             <el-button type="warning" @click="resetting">重置</el-button>
            <el-button type="primary" @click="dialogFormVisible = true"
              >新增</el-button
            >
          </el-card>
        </div>
        
        <!-- 显示 -->
        <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>列表区域</el-breadcrumb-item>
                </el-breadcrumb>
                  <el-table :data="tableData" height="500px" border style="width: 100%">
          <el-table-column prop="id" label="组织编号"> </el-table-column>
          <el-table-column prop="storeName" label="组织名称"> </el-table-column>
          <el-table-column prop="storeRate" label="税率"> </el-table-column>
          <el-table-column prop="storeType" label="渠道类型"> </el-table-column>
          <el-table-column prop="changeTime" label="时间"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="edit(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="del(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="page">
                    <el-pagination
            background
            layout="prev, pager, next"
            :total="this.count"
            @current-change="fengye($event)"
          >
          </el-pagination>
          总条数：{{ this.count }} 当前页数：{{ this.page }}/{{
            this.pagecount
          }}
        </div>
        </el-card>

        <!-- 正常显示 -->
      </el-main>
    </el-container>

    <!-- 添加框 -->
    <div>
      <el-dialog width='400px' title="添加税率" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="组织编号" style="text-align:left;">
            <el-input v-model="form.userId"></el-input>
          </el-form-item>

          <el-form-item label="组织名称" style="text-align:left;">
            <el-input v-model="form.storeName"></el-input>
          </el-form-item>

          <el-form-item label="渠道类型" style="text-align:left;">
            <el-input v-model="form.storeType"></el-input>
          </el-form-item>

          <el-form-item label="税率" style="text-align:left;margin-left:30px;">
            <el-input v-model="form.storeRate"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDept"> 添加</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改框 -->
    <div>
      <el-dialog width='400px' title="修改税率" :visible.sync="dialogeditFormVisible">
        <el-form :model="editform">
          <el-form-item label="组织编号" style="text-align:left;">
          
            <el-input v-model="editform.userId"  :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="组织名称" style="text-align:left;">
           
            <el-input v-model="editform.storeName" :disabled="true"></el-input>
          </el-form-item>

           <el-form-item label="渠道类型" style="text-align:left;">
             <el-input v-model="editform.storeType"  :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="税率" style="text-align:left;margin-left:30px;">
            <el-input v-model="editform.storeRate"></el-input>
          </el-form-item>
         
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogeditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="deptDept"> 保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script scope>
export default {
  name: "Tax",
  data() {
    return {
      //添加框隐藏
      dialogFormVisible: false,
      //修改框隐藏
      dialogeditFormVisible: false,
      //显示
      tableData: [],
      //查询
      searchname: "",
      // 搜索后显示
      searchData: [],
      //分页
      page: 1,
      limit: 10,
      pagecount: 0,
      count: 0,
      //显示
      form: {
        storeName: "",
        userId: "",
        storeType: "",
        storeRate: "",
        id: "",
        changeTime: "",
      },
      editform: {
        storeName: "",
        userId: "",
        storeType: "",
        storeRate: "",
        id: "",
        changeTime: "",
      },
    };
  },

  mounted: function() {
    this.getDeptList();
  },

  methods: {
    //重置
    resetting: function() {
      this.$router.go(0);
    },
    //获取数据显示
    getDeptList: function() {
      this.$axios
        .get("api/rate/selectForPage", {
          params: {
            limit: 10,
            page: 1,
          },
        })
        .then((res) => {
          let result = res.data;
          this.form.changeTime = new Date();
          if (result.code == 200) {
            console.log(result);
            this.tableData = result.data;
            this.pagecount = result.pageCount;
            this.count = result.count;
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {});
    },
    //添加数据
    addDept: function() {
      this.$axios
        .post("/api/rate/insert", {
          userId: this.form.userId,
          storeName: this.form.storeName,
          storeType: this.form.storeType,
          storeRate: this.form.storeRate,
          id: this.form.id,
          
        })
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            this.$alert(result.msg);
            if (result.msg == "添加成功") {
              this.getDeptList();
              this.$router.go(0);
            }
            this.dialogFormVisible = false;
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {
          this.$alert("请求出错");
        });
    },
    //删除数据
    del: function(id) {
      this.$axios
        .post("/api/rate/deleteById", {
          id: id,
        })
        .then((res) => {
          let result = res.data;
          if (result.msg == "删除成功") {
            this.getDeptList();
            this.$router.go(0);
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {
          this.$alert("请求出错，请检查");
        });
    },
    //修改数据
    edit: function(obj) {
      this.dialogeditFormVisible = true;
      this.editform.storeRate = obj.storeRate;
      this.editform.storeName= obj.storeName;
      this.editform.userId= obj.userId;
      this.editform.storeType= obj.storeType;
      this.editform.id = obj.id;
    },
    deptDept: function() {
      this.$axios
        .post("/api/rate/updateById", {

          storeRate: this.editform.storeRate,
          id: this.editform.id,

        })
        .then((res) => {

          let result = res.data;

          if (result.msg == "修改成功") {
            this.$alert(result.msg);
            this.fengye();
            this.$router.go(0);
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {
          this.$alert("请求出错");
        });
    },
    //分页
    fengye: function(e) {
      console.log(e);
      this.page = e;
      this.$axios
        .get("/api/rate/selectForPag", {
          params: {
            limit: 10,
            page: 1,
          },
        })
        .then((res) => {
          let result = res.data;
          console.log(result);
          if (result.code == 200) {
            this.tableData = [];
            this.tableData = result.data;
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {});
    },
    //查询
    Search: function() {
      this.$axios
        .get("/api/rate/selectForPage", {
          params: {
            limit: 10,
            page: 1,
            name: this.searchname,
          },
        })
        .then((res) => {
          let result = res.data;

          if (result.code == 200) {
            this.tableData = result.data;
           
            this.pagecount = result.pageCount;
            this.count = result.count;
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
 .box-card {
  margin: 10px 0px;
  text-align: left;
}

.el-main{
  margin: 0;padding: 0;
}
#chaxbh {
  width: 200px;
}
.el-input {
  width: 200px;
  margin-left: 10px;
}
.el-input__inner{
  width: auto;
}
.el-breadcrumb {
  margin-bottom: 10px;
}
.page {
  margin-top: 20px;
}
</style>
